<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔仙文字翻译器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }

        /* 动态星空背景 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.6), transparent),
                radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.7), transparent),
                radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.5), transparent),
                radial-gradient(1px 1px at 160px 30px, rgba(255,255,255,0.6), transparent);
            background-repeat: repeat;
            background-size: 200px 150px;
            animation: sparkle 8s linear infinite;
            pointer-events: none;
            z-index: 1;
            will-change: transform;
        }

        @keyframes sparkle {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-150px); }
        }

        /* 悬浮粒子效果 */
        .particle {
            position: fixed;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            pointer-events: none;
            z-index: 1;
            animation: float 8s ease-in-out infinite;
            will-change: transform, opacity;
        }

        @keyframes float {
            0%, 100% { 
                transform: translateY(0px) rotate(0deg); 
                opacity: 0.4; 
            }
            25% { 
                transform: translateY(-15px) rotate(45deg); 
                opacity: 0.6; 
            }
            50% { 
                transform: translateY(-25px) rotate(90deg); 
                opacity: 0.8; 
            }
            75% { 
                transform: translateY(-15px) rotate(135deg); 
                opacity: 0.6; 
            }
        }

        .container {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 45px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            max-width: 1000px;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.15);
            position: relative;
            z-index: 10;
            animation: containerFloat 6s ease-in-out infinite;
        }

        @keyframes containerFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }

        .container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                rgba(255,255,255,0.1) 0%, 
                rgba(255,255,255,0.05) 25%, 
                rgba(102,126,234,0.1) 50%, 
                rgba(118,75,162,0.1) 75%, 
                rgba(240,147,251,0.1) 100%);
            border-radius: 25px;
            z-index: -1;
            filter: blur(1px);
        }

        .header {
            text-align: center;
            margin-bottom: 35px;
            position: relative;
        }

        .header h1 {
            color: #fff;
            font-size: 2.8em;
            margin-bottom: 15px;
            background: linear-gradient(45deg, #fff, #e6f3ff, #fff, #f0e6ff);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGradient 3s ease-in-out infinite;
            text-shadow: 0 0 30px rgba(255,255,255,0.5);
            position: relative;
        }

        @keyframes titleGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .header h1::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: translateX(-100%);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .header p {
            color: rgba(255,255,255,0.9);
            font-size: 1.2em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .key-section {
            margin-bottom: 40px;
            position: relative;
        }

        .key-section label {
            display: block;
            margin-bottom: 15px;
            color: rgba(255,255,255,0.95);
            font-weight: 600;
            font-size: 1.2em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .key-input-group {
            position: relative;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 8px;
            border: 2px solid rgba(255,255,255,0.15);
            box-shadow: 
                0 10px 30px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.2);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .key-input-group:hover {
            border-color: rgba(255,255,255,0.3);
            box-shadow: 
                0 15px 40px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .key-input-group:focus-within {
            border-color: rgba(102, 126, 234, 0.8);
            box-shadow: 
                0 0 30px rgba(102, 126, 234, 0.5),
                0 15px 40px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.4);
            transform: translateY(-3px);
        }

        .key-input {
            flex: 1;
            padding: 18px 20px;
            border: none;
            border-radius: 15px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: transparent;
            color: #fff;
            outline: none;
            font-weight: 500;
            padding-right: 120px; /* 为按钮组预留空间 */
        }

        .key-input::placeholder {
            color: rgba(255,255,255,0.5);
            font-style: italic;
        }

        .key-actions {
            position: absolute;
            right: 65px; /* 在保存按钮左侧 */
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 5px;
            z-index: 5;
        }

        .key-action-btn {
            width: 32px;
            height: 32px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }

        .key-action-btn:hover {
            background: rgba(255,255,255,0.25);
            border-color: rgba(255,255,255,0.4);
            color: rgba(255,255,255,1);
            transform: scale(1.1);
            opacity: 1;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .key-action-btn:active {
            transform: scale(0.95);
        }

        .key-action-btn.active {
            background: rgba(102, 126, 234, 0.3);
            border-color: rgba(102, 126, 234, 0.5);
            color: #fff;
            opacity: 1;
        }

        .key-strength {
            position: absolute;
            bottom: -25px;
            left: 0;
            right: 0;
            height: 3px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
            overflow: hidden;
        }

        .key-strength-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff4757, #ffa502, #2ed573);
            border-radius: 2px;
            transition: all 0.5s ease;
            position: relative;
        }

        .key-strength-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .key-save-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #28a745, #20c997);
            background-size: 200% 200%;
            animation: gradientShift 3s ease infinite;
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 8px 25px rgba(40, 167, 69, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .key-save-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.6s;
        }

        .key-save-btn:hover::before {
            left: 100%;
        }

        .key-save-btn:hover {
            transform: translateY(-50%) scale(1.1);
            box-shadow: 
                0 15px 40px rgba(40, 167, 69, 0.5),
                inset 0 2px 0 rgba(255,255,255,0.3);
        }

        .key-save-btn:active {
            transform: translateY(-50%) scale(0.95);
        }

        .key-save-btn:disabled {
            background: linear-gradient(135deg, #6c757d, #5a6268);
            cursor: not-allowed;
            transform: translateY(-50%) scale(1);
            box-shadow: 
                0 4px 15px rgba(108, 117, 125, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .key-save-btn:disabled:hover {
            transform: translateY(-50%) scale(1);
        }

        .key-save-btn .btn-text {
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
        }

        .key-save-btn .btn-icon {
            font-size: 16px;
        }

        .translate-section {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 30px;
            align-items: stretch;
            margin-bottom: 35px;
            padding: 25px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .text-area {
            position: relative;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .text-area label {
            display: block;
            margin-bottom: 15px;
            color: rgba(255,255,255,0.95);
            font-weight: bold;
            font-size: 1.1em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }

        .text-controls {
            display: flex;
            gap: 8px;
        }

        .control-btn {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 10px;
            color: white;
            padding: 8px 15px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
        }

        .control-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            border-color: rgba(255,255,255,0.4);
        }

        .control-btn:active {
            transform: translateY(0) scale(0.98);
        }

        .control-btn .btn-icon {
            font-size: 14px;
        }

        .text-input {
            width: 100%;
            height: 280px;
            padding: 25px;
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 15px;
            font-size: 16px;
            resize: vertical;
            font-family: inherit;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            color: #fff;
            box-shadow: 
                0 8px 25px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(255,255,255,0.2);
            flex: 1;
            min-height: 280px;
        }

        .text-input::placeholder {
            color: rgba(255,255,255,0.6);
        }

        .text-input:focus {
            outline: none;
            border-color: rgba(255,255,255,0.5);
            box-shadow: 
                0 0 25px rgba(102, 126, 234, 0.4),
                0 0 50px rgba(255,255,255,0.2),
                inset 0 1px 0 rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .controls {
            display: flex;
            flex-direction: column;
            gap: 25px;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.15);
            box-shadow: 
                0 10px 30px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(255,255,255,0.2);
            min-width: 180px;
        }

        .btn {
            padding: 16px 32px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 150px;
            color: white;
            box-shadow: 
                0 8px 25px rgba(0, 0, 0, 0.2),
                inset 0 2px 0 rgba(255,255,255,0.2),
                inset 0 -2px 0 rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            letter-spacing: 0.5px;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
            transition: left 0.6s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-encrypt {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
            background-size: 300% 300%;
            animation: gradientShift 4s ease infinite;
        }

        .btn-encrypt:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 
                0 20px 50px rgba(102, 126, 234, 0.4),
                inset 0 3px 0 rgba(255,255,255,0.3),
                inset 0 -3px 0 rgba(0,0,0,0.2);
        }

        .btn-decrypt {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #f093fb 100%);
            background-size: 300% 300%;
            animation: gradientShift 4s ease infinite reverse;
        }

        .btn-decrypt:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 
                0 20px 50px rgba(245, 87, 108, 0.4),
                inset 0 3px 0 rgba(255,255,255,0.3),
                inset 0 -3px 0 rgba(0,0,0,0.2);
        }

        .btn-clear {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #4facfe 100%);
            background-size: 300% 300%;
            animation: gradientShift 4s ease infinite;
            font-size: 14px;
            padding: 12px 28px;
            min-width: 120px;
        }

        .btn-clear:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 
                0 20px 50px rgba(79, 172, 254, 0.4),
                inset 0 3px 0 rgba(255,255,255,0.3),
                inset 0 -3px 0 rgba(0,0,0,0.2);
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: 
                0 5px 15px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .btn:active {
            transform: translateY(-2px) scale(0.98);
        }

        .arrow {
            font-size: 28px;
            color: rgba(255,255,255,0.8);
            font-weight: bold;
            text-shadow: 0 0 20px rgba(255,255,255,0.5);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.8; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.1); }
        }

        .features {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 25px;
            margin-top: 35px;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.1),
                inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .features h3 {
            color: rgba(255,255,255,0.95);
            margin-bottom: 20px;
            text-align: center;
            font-size: 1.3em;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .features ul {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .features li {
            color: rgba(255,255,255,0.9);
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .features li:hover {
            transform: translateY(-2px) scale(1.02);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
        }

        .features li:before {
            content: "✓";
            color: #4facfe;
            font-weight: bold;
            margin-right: 8px;
            text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
        }

        .warning {
            background: rgba(255, 193, 7, 0.15);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 193, 7, 0.3);
            border-radius: 15px;
            padding: 20px;
            margin-top: 25px;
            color: rgba(255, 248, 220, 0.95);
            box-shadow: 
                0 10px 25px rgba(255, 193, 7, 0.1),
                inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .warning strong {
            color: #ffd700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        @media (max-width: 768px) {
            .translate-section {
                grid-template-columns: 1fr;
                gap: 25px;
                padding: 20px;
            }

            .arrow {
                transform: rotate(90deg);
            }

            .container {
                padding: 20px;
            }

            .header h1 {
                font-size: 2em;
            }
            
            .text-area label {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            
            .text-controls {
                align-self: flex-end;
            }
            
            .control-btn {
                padding: 6px 12px;
                font-size: 12px;
            }
            
            .controls {
                padding: 20px 15px;
                min-width: auto;
                width: 100%;
            }
            
            .text-input {
                height: 200px;
                min-height: 200px;
            }
            
            .key-input {
                padding-right: 110px; /* 移动端调整 */
            }
            
            .key-actions {
                right: 60px; /* 移动端调整位置 */
            }
            
            .key-action-btn {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }
        }

        .status {
            text-align: center;
            margin-top: 15px;
            padding: 10px;
            border-radius: 8px;
            font-weight: bold;
        }

        .status.success {
            background: rgba(40, 167, 69, 0.1);
            color: #155724;
            border: 1px solid rgba(40, 167, 69, 0.3);
        }

        .status.error {
            background: rgba(220, 53, 69, 0.1);
            color: #721c24;
            border: 1px solid rgba(220, 53, 69, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔐 魔仙文字翻译器</h1>
            <p>让你的交流保密起来哈哈哈哈哈</p>
        </div>

        <div class="key-section">
            <label for="secretKey">
                🔑 加密密钥（请妥善保管）
            </label>
            <div class="key-input-group">
                <input type="password" id="secretKey" class="key-input" placeholder="请输入您的专属密钥（至少8位字符）">
                <div class="key-actions">
                    <button class="key-action-btn" id="togglePasswordBtn" onclick="togglePasswordVisibility()" title="显示/隐藏密钥">
                        👁️
                    </button>
                    <button class="key-action-btn" id="clearKeyBtn" onclick="clearKey()" title="清除密钥">
                        ✖️
                    </button>
                </div>
                <button id="saveKeyBtn" class="key-save-btn" onclick="manualSaveKey()" disabled title="保存密钥">
                    <span class="btn-icon">💾</span>
                </button>
                <div class="key-strength">
                    <div class="key-strength-bar" id="keyStrengthBar"></div>
                </div>
            </div>
        </div>

        <div class="translate-section">
            <div class="text-area">
                <label for="originalText">
                    📝 原始文字：
                    <div class="text-controls">
                        <button class="control-btn" onclick="pasteText('originalText')" title="粘贴文本">
                            <span class="btn-icon">📋</span> 粘贴
                        </button>
                        <button class="control-btn" onclick="copyText('originalText')" title="复制文本">
                            <span class="btn-icon">📄</span> 复制
                        </button>
                    </div>
                </label>
                <textarea id="originalText" class="text-input" placeholder="请输入要加密的文字..."></textarea>
            </div>
            
            <div class="controls">
                <button class="btn btn-encrypt" onclick="encryptText()">
                    🔒 加密
                </button>
                <div class="arrow">⇄</div>
                <button class="btn btn-decrypt" onclick="decryptText()">
                    🔓 解密
                </button>
                <button class="btn btn-clear" onclick="clearAll()">
                    🗑️ 清空
                </button>
            </div>
            
            <div class="text-area">
                <label for="translatedText">
                    🇨🇳 汉字密文：
                    <div class="text-controls">
                        <button class="control-btn" onclick="pasteText('translatedText')" title="粘贴文本">
                            <span class="btn-icon">📋</span> 粘贴
                        </button>
                        <button class="control-btn" onclick="copyText('translatedText')" title="复制文本">
                            <span class="btn-icon">📄</span> 复制
                        </button>
                    </div>
                </label>
                <textarea id="translatedText" class="text-input" placeholder="加密后的汉字将显示在这里，看起来像真正的中文文字..."></textarea>
            </div>
        </div>

        <div id="status" class="status" style="display: none;"></div>

        <div class="features">
            <h3>🛡️ 安全特性</h3>
            <ul>
                <li>AES-256-GCM加密</li>
                <li>汉字映射伪装系统</li>
                <li>Unicode安全编码</li>
                <li>随机盐值增强安全</li>
                <li>自定义密钥系统</li>
                <li>本地加密处理</li>
                <li>无服务器依赖</li>
                <li>防暴力破解设计</li>
                <li>汉字结果伪装性</li>
            </ul>
        </div>

        <div class="warning">
            <strong>🚨 重要提醒：</strong> 请务必记住您的密钥！密钥丢失将无法解密文字。建议使用复杂且容易记住的密钥组合。
        </div>
    </div>

    <script>
        // Unicode安全的Base64编码解码函数
        function safeBase64Encode(str) {
            try {
                // 先转换为UTF-8字节数组，再转换为Base64
                return btoa(unescape(encodeURIComponent(str)));
            } catch (error) {
                // 如果btoa失败，使用手动实现
                return manualBase64Encode(str);
            }
        }

        function safeBase64Decode(str) {
            try {
                // 先Base64解码，再从UTF-8转换回来
                return decodeURIComponent(escape(atob(str)));
            } catch (error) {
                // 如果atob失败，使用手动实现
                return manualBase64Decode(str);
            }
        }

        // 手动实现Base64编码（兼容方案）
        function manualBase64Encode(str) {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
            let result = '';
            
            // 先转换为UTF-8字节数组
            const utf8Bytes = new TextEncoder().encode(str);
            
            for (let i = 0; i < utf8Bytes.length; i += 3) {
                const a = utf8Bytes[i];
                const b = utf8Bytes[i + 1] || 0;
                const c = utf8Bytes[i + 2] || 0;
                
                const combined = (a << 16) | (b << 8) | c;
                
                result += chars[(combined >> 18) & 63];
                result += chars[(combined >> 12) & 63];
                result += i + 1 < utf8Bytes.length ? chars[(combined >> 6) & 63] : '=';
                result += i + 2 < utf8Bytes.length ? chars[combined & 63] : '=';
            }
            
            return result;
        }

        // 手动实现Base64解码（兼容方案）
        function manualBase64Decode(str) {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
            let result = [];
            
            // 移除填充字符
            str = str.replace(/=/g, '');
            
            for (let i = 0; i < str.length; i += 4) {
                const a = chars.indexOf(str[i]);
                const b = chars.indexOf(str[i + 1]);
                const c = chars.indexOf(str[i + 2]);
                const d = chars.indexOf(str[i + 3]);
                
                const combined = (a << 18) | (b << 12) | (c << 6) | d;
                
                result.push((combined >> 16) & 255);
                if (str[i + 2] !== undefined) result.push((combined >> 8) & 255);
                if (str[i + 3] !== undefined) result.push(combined & 255);
            }
            
            // 转换回Unicode字符串
            return new TextDecoder().decode(new Uint8Array(result));
        }

        // 检查加密API兼容性
        function checkCryptoSupport() {
            if (!window.crypto) {
                return false;
            }
            if (!window.crypto.subtle) {
                return false;
            }
            if (!window.crypto.getRandomValues) {
                return false;
            }
            return true;
        }

        // 简单的备用加密方案（仅用于演示，安全性较低）
        function simpleEncrypt(text, password) {
            const key = simpleHash(password);
            let result = '';
            for (let i = 0; i < text.length; i++) {
                const charCode = text.charCodeAt(i);
                const keyChar = key.charCodeAt(i % key.length);
                const encrypted = charCode ^ keyChar;
                result += String.fromCharCode(encrypted);
            }
            return safeBase64Encode(result); // 使用安全的Base64编码
        }

        function simpleDecrypt(encryptedText, password) {
            const key = simpleHash(password);
            const decoded = safeBase64Decode(encryptedText); // 使用安全的Base64解码
            let result = '';
            for (let i = 0; i < decoded.length; i++) {
                const charCode = decoded.charCodeAt(i);
                const keyChar = key.charCodeAt(i % key.length);
                const decrypted = charCode ^ keyChar;
                result += String.fromCharCode(decrypted);
            }
            return result;
        }

        function simpleHash(str) {
            let hash = 0;
            for (let i = 0; i < str.length; i++) {
                const char = str.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash = hash & hash;
            }
            return Math.abs(hash).toString(36) + str;
        }

        // 全局加密支持标志
        const cryptoSupported = checkCryptoSupport();
        
        if (!cryptoSupported) {
            console.warn('浏览器不支持Web Crypto API，将使用备用加密方案');
        }

        // 汉字映射加密系统
        const chineseChars = [
            '春', '夏', '秋', '冬', '山', '水', '风', '雨', '雷', '电', '云', '霞', '雪', '霜', '露', '雾',
            '花', '草', '树', '竹', '松', '梅', '兰', '菊', '荷', '桃', '李', '杏', '桂', '樱', '牡', '丹',
            '龙', '凤', '虎', '豹', '鹰', '燕', '雁', '鸽', '莺', '鹤', '孔', '雀', '蝶', '蜂', '蚁', '蛛',
            '金', '银', '铜', '铁', '玉', '珠', '钻', '翡', '翠', '琥', '珀', '玛', '瑙', '水', '晶', '石',
            '天', '地', '人', '和', '仁', '义', '礼', '智', '信', '忠', '孝', '悌', '慈', '爱', '诚', '善',
            '琴', '棋', '书', '画', '诗', '词', '歌', '赋', '文', '武', '德', '艺', '技', '能', '才', '华',
            '红', '橙', '黄', '绿', '青', '蓝', '紫', '白', '黑', '灰', '粉', '棕', '银', '金', '彩', '虹',
            '东', '南', '西', '北', '中', '上', '下', '左', '右', '前', '后', '内', '外', '高', '低', '远',
            '日', '月', '星', '辰', '光', '明', '暗', '亮', '晴', '阴', '朝', '夕', '昼', '夜', '晨', '暮',
            '江', '河', '湖', '海', '溪', '泉', '瀑', '潭', '池', '井', '源', '流', '波', '浪', '涛', '澜'
        ];

        // 创建字符映射表
        function createCharMap(password) {
            const chars = [...chineseChars];
            const seed = hashCode(password);
            shuffleArray(chars, seed);
            
            const map = new Map();
            const reverseMap = new Map();
            
            // 为所有可能的字符创建映射
            const allChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz+/=';
            for (let i = 0; i < allChars.length; i++) {
                const sourceChar = allChars[i];
                const targetChar = chars[i % chars.length];
                map.set(sourceChar, targetChar);
                reverseMap.set(targetChar, sourceChar);
            }
            
            return { map, reverseMap };
        }

        // 简单哈希函数
        function hashCode(str) {
            let hash = 0;
            for (let i = 0; i < str.length; i++) {
                const char = str.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash = hash & hash; // 转换为32位整数
            }
            return Math.abs(hash);
        }

        // 数组洗牌算法
        function shuffleArray(array, seed) {
            let currentIndex = array.length;
            let randomIndex;
            
            // 使用种子创建伪随机数生成器
            let random = seed;
            function seededRandom() {
                random = (random * 9301 + 49297) % 233280;
                return random / 233280;
            }
            
            while (currentIndex !== 0) {
                randomIndex = Math.floor(seededRandom() * currentIndex);
                currentIndex--;
                [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
            }
        }

        // 汉字映射加密
        async function encryptToChinese(text, password) {
            try {
                // 首先尝试使用对应的加密方法
                let aesEncrypted;
                
                if (cryptoSupported) {
                    // 使用AES加密
                    aesEncrypted = await encryptData(text, password);
                } else {
                    // 使用备用加密方案
                    aesEncrypted = simpleEncrypt(text, password);
                }
                
                // 然后转换为汉字
                const { map } = createCharMap(password);
                let chineseResult = '';
                
                for (let char of aesEncrypted) {
                    if (map.has(char)) {
                        chineseResult += map.get(char);
                    } else {
                        // 对于不在映射表中的字符，使用字符码映射
                        const charCode = char.charCodeAt(0);
                        const index = charCode % chineseChars.length;
                        chineseResult += chineseChars[index];
                    }
                }
                
                return chineseResult;
            } catch (error) {
                throw new Error('汉字加密失败：' + error.message);
            }
        }

        // 汉字映射解密
        async function decryptFromChinese(chineseText, password) {
            try {
                // 首先将汉字转换回Base64
                const { reverseMap } = createCharMap(password);
                let base64Result = '';
                
                for (let char of chineseText) {
                    if (reverseMap.has(char)) {
                        base64Result += reverseMap.get(char);
                    } else {
                        // 对于不在反向映射表中的字符，尝试通过字符码反推
                        const index = chineseChars.indexOf(char);
                        if (index !== -1) {
                            // 这里需要更复杂的逆向算法，暂时跳过
                            throw new Error('发现未知汉字映射');
                        }
                    }
                }
                
                // 然后使用相应的解密方法
                if (cryptoSupported) {
                    return await decryptData(base64Result, password);
                } else {
                    return simpleDecrypt(base64Result, password);
                }
            } catch (error) {
                throw new Error('汉字解密失败：' + error.message);
            }
        }
        // AES加密工具函数（仅在支持的情况下使用）
        async function generateKey(password, salt) {
            if (!cryptoSupported) {
                throw new Error('浏览器不支持Web Crypto API');
            }
            
            const encoder = new TextEncoder();
            const keyMaterial = await window.crypto.subtle.importKey(
                'raw',
                encoder.encode(password),
                { name: 'PBKDF2' },
                false,
                ['deriveBits', 'deriveKey']
            );
            
            return window.crypto.subtle.deriveKey(
                {
                    name: 'PBKDF2',
                    salt: salt,
                    iterations: 100000,
                    hash: 'SHA-256'
                },
                keyMaterial,
                { name: 'AES-GCM', length: 256 },
                false,
                ['encrypt', 'decrypt']
            );
        }

        async function encryptData(text, password) {
            if (!cryptoSupported) {
                throw new Error('浏览器不支持Web Crypto API');
            }
            
            try {
                const encoder = new TextEncoder();
                const data = encoder.encode(text);
                
                // 生成随机盐值和IV
                const salt = window.crypto.getRandomValues(new Uint8Array(16));
                const iv = window.crypto.getRandomValues(new Uint8Array(12));
                
                // 生成密钥
                const key = await generateKey(password, salt);
                
                // 加密数据
                const encrypted = await window.crypto.subtle.encrypt(
                    { name: 'AES-GCM', iv: iv },
                    key,
                    data
                );
                
                // 组合所有数据
                const result = new Uint8Array(salt.length + iv.length + encrypted.byteLength);
                result.set(salt, 0);
                result.set(iv, salt.length);
                result.set(new Uint8Array(encrypted), salt.length + iv.length);
                
                // 转换为Base64
                return safeBase64Encode(String.fromCharCode.apply(null, result));
            } catch (error) {
                throw new Error('加密失败：' + error.message);
            }
        }

        async function decryptData(encryptedText, password) {
            if (!cryptoSupported) {
                throw new Error('浏览器不支持Web Crypto API');
            }
            
            try {
                // 从Base64解码
                const data = new Uint8Array(safeBase64Decode(encryptedText).split('').map(char => char.charCodeAt(0)));
                
                // 提取盐值、IV和加密数据
                const salt = data.slice(0, 16);
                const iv = data.slice(16, 28);
                const encrypted = data.slice(28);
                
                // 生成密钥
                const key = await generateKey(password, salt);
                
                // 解密数据
                const decrypted = await window.crypto.subtle.decrypt(
                    { name: 'AES-GCM', iv: iv },
                    key,
                    encrypted
                );
                
                // 转换为文本
                const decoder = new TextDecoder();
                return decoder.decode(decrypted);
            } catch (error) {
                throw new Error('解密失败：密钥错误或数据损坏');
            }
        }

        function showStatus(message, type) {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = 'status ' + type;
            status.style.display = 'block';
            
            setTimeout(() => {
                status.style.display = 'none';
            }, 3000);
        }

        function validateInputs() {
            const key = document.getElementById('secretKey').value;
            const text = document.getElementById('originalText').value;
            
            if (!key) {
                showStatus('请输入加密密钥！', 'error');
                return false;
            }
            
            if (key.length < 8) {
                showStatus('密钥长度至少需要8位字符！', 'error');
                return false;
            }
            
            if (!text.trim()) {
                showStatus('请输入要处理的文字！', 'error');
                return false;
            }
            
            return true;
        }

        async function encryptText() {
            if (!validateInputs()) return;
            
            const key = document.getElementById('secretKey').value;
            const text = document.getElementById('originalText').value;
            const resultArea = document.getElementById('translatedText');
            
            try {
                // 显示加载状态
                const encryptBtn = document.querySelector('.btn-encrypt');
                encryptBtn.disabled = true;
                encryptBtn.textContent = '🔄 汉字加密中...';
                
                const encrypted = await encryptToChinese(text, key);
                resultArea.value = encrypted;
                showStatus('✅ 文字已加密为汉字形式！', 'success');
            } catch (error) {
                showStatus('❌ ' + error.message, 'error');
            } finally {
                const encryptBtn = document.querySelector('.btn-encrypt');
                encryptBtn.disabled = false;
                encryptBtn.textContent = '🔒 加密';
            }
        }

        async function decryptText() {
            const key = document.getElementById('secretKey').value;
            const encryptedText = document.getElementById('translatedText').value;
            const resultArea = document.getElementById('originalText');
            
            if (!key) {
                showStatus('请输入解密密钥！', 'error');
                return;
            }
            
            if (!encryptedText.trim()) {
                showStatus('请输入要解密的汉字！', 'error');
                return;
            }
            
            try {
                // 显示加载状态
                const decryptBtn = document.querySelector('.btn-decrypt');
                decryptBtn.disabled = true;
                decryptBtn.textContent = '🔄 汉字解密中...';
                
                const decrypted = await decryptFromChinese(encryptedText, key);
                resultArea.value = decrypted;
                showStatus('✅ 汉字解密成功！', 'success');
            } catch (error) {
                showStatus('❌ ' + error.message, 'error');
            } finally {
                const decryptBtn = document.querySelector('.btn-decrypt');
                decryptBtn.disabled = false;
                decryptBtn.textContent = '🔓 解密';
            }
        }

        function clearAll() {
            document.getElementById('originalText').value = '';
            document.getElementById('translatedText').value = '';
            document.getElementById('status').style.display = 'none';
            showStatus('🗑️ 内容已清空', 'success');
        }

        // 复制文本功能
        async function copyText(elementId) {
            const element = document.getElementById(elementId);
            const text = element.value;
            
            if (!text.trim()) {
                showStatus('📋 没有内容可复制！', 'error');
                return;
            }
            
            try {
                await navigator.clipboard.writeText(text);
                showStatus('✅ 文本已复制到剪贴板！', 'success');
                
                // 视觉反馈
                const btn = event.target;
                const originalText = btn.textContent;
                btn.textContent = '✓ 已复制';
                btn.style.background = 'rgba(40, 167, 69, 0.9)';
                
                setTimeout(() => {
                    btn.textContent = originalText;
                    btn.style.background = 'rgba(102, 126, 234, 0.9)';
                }, 1500);
            } catch (error) {
                // 降级方案：使用传统方法
                element.select();
                element.setSelectionRange(0, 99999);
                try {
                    document.execCommand('copy');
                    showStatus('✅ 文本已复制到剪贴板！', 'success');
                } catch (e) {
                    showStatus('❌ 复制失败，请手动复制', 'error');
                }
            }
        }
        
        // 粘贴文本功能
        async function pasteText(elementId) {
            const element = document.getElementById(elementId);
            
            try {
                const text = await navigator.clipboard.readText();
                if (!text.trim()) {
                    showStatus('📋 剪贴板为空！', 'error');
                    return;
                }
                
                element.value = text;
                showStatus('✅ 文本已从剪贴板粘贴！', 'success');
                
                // 视觉反馈
                const btn = event.target;
                const originalText = btn.textContent;
                btn.textContent = '✓ 已粘贴';
                btn.style.background = 'rgba(40, 167, 69, 0.9)';
                
                setTimeout(() => {
                    btn.textContent = originalText;
                    btn.style.background = 'rgba(102, 126, 234, 0.9)';
                }, 1500);
                
                // 触发文本框的input事件，以便其他功能响应
                element.dispatchEvent(new Event('input', { bubbles: true }));
            } catch (error) {
                showStatus('❌ 粘贴失败：' + (error.message || '请检查浏览器权限'), 'error');
            }
        }
        
        // 键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'Enter') {
                e.preventDefault();
                encryptText();
            } else if (e.ctrlKey && e.shiftKey && e.key === 'Enter') {
                e.preventDefault();
                decryptText();
            }
        });

        // 页面加载时尝试恢复密钥
        window.addEventListener('load', function() {
            const savedKey = localStorage.getItem('rememberedKey');
            const keyInput = document.getElementById('secretKey');
            const saveBtn = document.getElementById('saveKeyBtn');
            
            // 显示加密支持状态
            if (!cryptoSupported) {
                showStatus('⚠️ 浏览器不支持高级加密，将使用备用方案（支持中文）', 'error');
            } else {
                showStatus('✅ AES加密系统已就绪，安全级别：军用级（支持中文）', 'success');
            }
            
            if (savedKey) {
                keyInput.value = savedKey;
                showStatus('🔑 已恢复保存的密钥', 'success');
                
                // 更新密钥强度显示
                updateKeyStrength(savedKey);
                
                // 更新所有按钮状态
                const clearBtn = document.getElementById('clearKeyBtn');
                const toggleBtn = document.getElementById('togglePasswordBtn');
                
                if (savedKey.length >= 8) {
                    saveBtn.disabled = false;
                    saveBtn.innerHTML = '<span class="btn-icon">✓</span>';
                    saveBtn.style.background = 'linear-gradient(135deg, #6c757d, #495057)';
                    saveBtn.title = '密钥已保存';
                }
                
                // 显示清除和切换按钮
                clearBtn.style.opacity = '1';
                clearBtn.style.pointerEvents = 'auto';
                toggleBtn.style.opacity = '1';
                toggleBtn.style.pointerEvents = 'auto';
            } else {
                // 隐藏清除和切换按钮
                const clearBtn = document.getElementById('clearKeyBtn');
                const toggleBtn = document.getElementById('togglePasswordBtn');
                clearBtn.style.opacity = '0.3';
                clearBtn.style.pointerEvents = 'none';
                toggleBtn.style.opacity = '0.3';
                toggleBtn.style.pointerEvents = 'none';
            }
            
            // 创建限制数量的粒子效果
            createLimitedParticles();
        });
        
        // 创建有限的悬浮粒子效果
        let particleCount = 0;
        const maxParticles = 8; // 限制最大粒子数量
        
        function createLimitedParticles() {
            // 清理现有粒子
            const existingParticles = document.querySelectorAll('.particle');
            existingParticles.forEach(p => p.remove());
            particleCount = 0;
            
            // 创建限制数量的粒子
            for (let i = 0; i < maxParticles; i++) {
                setTimeout(() => {
                    if (particleCount < maxParticles) {
                        createSingleParticle();
                    }
                }, i * 500);
            }
        }
        
        function createSingleParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle';
            
            // 随机尺寸和位置
            const size = Math.random() * 4 + 2;
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            
            // 随机动画延迟和持续时间
            particle.style.animationDelay = Math.random() * 3 + 's';
            particle.style.animationDuration = (Math.random() * 3 + 4) + 's';
            
            document.body.appendChild(particle);
            particleCount++;
            
            // 在动画结束后移除粒子
            setTimeout(() => {
                if (particle.parentNode) {
                    particle.remove();
                    particleCount--;
                    
                    // 在一段时间后重新创建一个粒子
                    setTimeout(() => {
                        if (particleCount < maxParticles) {
                            createSingleParticle();
                        }
                    }, Math.random() * 2000 + 1000);
                }
            }, 8000);
        }

        // 密码显示/隐藏切换功能
        function togglePasswordVisibility() {
            const keyInput = document.getElementById('secretKey');
            const toggleBtn = document.getElementById('togglePasswordBtn');
            
            if (keyInput.type === 'password') {
                keyInput.type = 'text';
                toggleBtn.textContent = '🙈'; // 看不见的猴子
                toggleBtn.classList.add('active');
                toggleBtn.title = '隐藏密钥';
            } else {
                keyInput.type = 'password';
                toggleBtn.textContent = '👁️'; // 眼睛
                toggleBtn.classList.remove('active');
                toggleBtn.title = '显示密钥';
            }
        }

        // 清除密钥功能
        function clearKey() {
            const keyInput = document.getElementById('secretKey');
            const saveBtn = document.getElementById('saveKeyBtn');
            const strengthBar = document.getElementById('keyStrengthBar');
            
            // 清空输入框
            keyInput.value = '';
            
            // 重置密钥强度显示
            strengthBar.style.width = '0%';
            strengthBar.title = '';
            
            // 重置保存按钮状态
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<span class="btn-icon">💾</span>';
            saveBtn.style.background = 'linear-gradient(135deg, #6c757d, #5a6268)';
            saveBtn.title = '密钥长度不足';
            
            // 显示清除成功提示
            showStatus('🗑️ 密钥已清除', 'success');
            
            // 聚焦到输入框
            keyInput.focus();
        }

        // 密码显示切换的快捷键支持（Ctrl + Shift + V）
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.shiftKey && e.key === 'V') {
                e.preventDefault();
                togglePasswordVisibility();
            }
        });

        // 密钥强度检测函数
        function checkKeyStrength(password) {
            let strength = 0;
            let strengthText = '弱';
            let strengthColor = '#ff4757';
            
            if (password.length >= 8) strength += 25;
            if (password.length >= 12) strength += 15;
            if (/[a-z]/.test(password)) strength += 15;
            if (/[A-Z]/.test(password)) strength += 15;
            if (/[0-9]/.test(password)) strength += 15;
            if (/[^a-zA-Z0-9]/.test(password)) strength += 15;
            
            if (strength >= 80) {
                strengthText = '强';
                strengthColor = '#2ed573';
            } else if (strength >= 60) {
                strengthText = '中';
                strengthColor = '#ffa502';
            } else if (strength >= 40) {
                strengthText = '较弱';
                strengthColor = '#ff6b47';
            }
            
            return { strength, strengthText, strengthColor };
        }

        // 更新密钥强度显示
        function updateKeyStrength(password) {
            const strengthBar = document.getElementById('keyStrengthBar');
            const { strength, strengthText, strengthColor } = checkKeyStrength(password);
            
            strengthBar.style.width = strength + '%';
            strengthBar.style.background = `linear-gradient(90deg, ${strengthColor}, ${strengthColor})`;
            strengthBar.title = `密钥强度: ${strengthText} (${strength}%)`;
        }

        // 密钥输入时的提示功能（不自动弹框）
        let keyInputTimer;
        document.getElementById('secretKey').addEventListener('input', function() {
            const key = this.value;
            const saveBtn = document.getElementById('saveKeyBtn');
            const clearBtn = document.getElementById('clearKeyBtn');
            const toggleBtn = document.getElementById('togglePasswordBtn');
            
            // 清除之前的定时器
            clearTimeout(keyInputTimer);
            
            // 更新密钥强度显示
            updateKeyStrength(key);
            
            // 控制清除和显示按钮的可见性
            if (key.length > 0) {
                clearBtn.style.opacity = '1';
                clearBtn.style.pointerEvents = 'auto';
                toggleBtn.style.opacity = '1';
                toggleBtn.style.pointerEvents = 'auto';
            } else {
                clearBtn.style.opacity = '0.3';
                clearBtn.style.pointerEvents = 'none';
                toggleBtn.style.opacity = '0.3';
                toggleBtn.style.pointerEvents = 'none';
            }
            
            // 控制保存按钮状态
            if (key.length >= 8) {
                saveBtn.disabled = false;
                
                // 检查是否已保存过这个密钥
                const savedKey = localStorage.getItem('rememberedKey');
                if (savedKey === key) {
                    saveBtn.innerHTML = '<span class="btn-icon">✓</span>';
                    saveBtn.style.background = 'linear-gradient(135deg, #6c757d, #495057)';
                    saveBtn.title = '密钥已保存';
                } else {
                    saveBtn.innerHTML = '<span class="btn-icon">💾</span>';
                    saveBtn.style.background = 'linear-gradient(135deg, #28a745, #20c997)';
                    saveBtn.title = '保存密钥';
                }
            } else {
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<span class="btn-icon">💾</span>';
                saveBtn.style.background = 'linear-gradient(135deg, #6c757d, #5a6268)';
                saveBtn.title = '密钥长度不足';
            }
        });

        // 手动保存密钥功能
        function manualSaveKey() {
            const key = document.getElementById('secretKey').value;
            const saveBtn = document.getElementById('saveKeyBtn');
            
            if (key.length < 8) {
                showStatus('密钥长度至少需要8位字符！', 'error');
                return;
            }
            
            try {
                localStorage.setItem('rememberedKey', key);
                showStatus('🔑 密钥已安全保存到本地！', 'success');
                
                // 更新按钮状态
                saveBtn.innerHTML = '<span class="btn-icon">✓</span>';
                saveBtn.style.background = 'linear-gradient(135deg, #6c757d, #495057)';
                saveBtn.title = '密钥已保存';
            } catch (error) {
                showStatus('保存失败，请检查浏览器设置', 'error');
            }
        }

        // 显示密钥保存选项（非侵入式）
        function showRememberKeyOption(key) {
            // 创建提示元素
            const reminder = document.createElement('div');
            reminder.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: linear-gradient(45deg, #667eea, #764ba2);
                color: white;
                padding: 15px 20px;
                border-radius: 10px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.3);
                z-index: 1000;
                max-width: 300px;
                font-size: 14px;
                animation: slideIn 0.3s ease;
            `;
            
            reminder.innerHTML = `
                <div style="margin-bottom: 10px;">🔑 是否保存此密钥到本地？</div>
                <div style="display: flex; gap: 10px;">
                    <button onclick="saveKey('${key}'); removeReminder(this)" 
                            style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 5px 15px; border-radius: 5px; cursor: pointer;">保存</button>
                    <button onclick="removeReminder(this)" 
                            style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 5px 15px; border-radius: 5px; cursor: pointer;">忽略</button>
                </div>
            `;
            
            // 添加动画样式
            const style = document.createElement('style');
            style.textContent = `
                @keyframes slideIn {
                    from { transform: translateX(100%); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
            `;
            document.head.appendChild(style);
            
            document.body.appendChild(reminder);
            
            // 10秒后自动消失
            setTimeout(() => {
                if (reminder.parentNode) {
                    reminder.style.animation = 'slideIn 0.3s ease reverse';
                    setTimeout(() => reminder.remove(), 300);
                }
            }, 10000);
        }

        // 保存密钥函数
        function saveKey(key) {
            localStorage.setItem('rememberedKey', key);
            showStatus('🔑 密钥已保存到本地', 'success');
        }

        // 移除提示框
        function removeReminder(btn) {
            const reminder = btn.closest('div').parentNode;
            reminder.style.animation = 'slideIn 0.3s ease reverse';
            setTimeout(() => reminder.remove(), 300);
        }
    </script>
</body>
</html>